<template>
	<div class="content">
		<u-navbar :placeholder="true" height="176rpx">
			<view slot="left" class="dis_f_co box" style="width: 698rpx;">
				<u-tabs @click="choose" :list="classicList" lineWidth="20" lineHeight="7"
					:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
				        color: '#131313',
				        fontWeight: 'bold',
						fontSize:'32rpx',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#999',
						fontSize:'28rpx',
				        transform: 'scale(1)'
				    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
				<view class="box" style="padding: 20rpx 0 0 0;background-color: #fff;flex: 1">
					<u-search class="search" placeholder="请输入采购的商品名称" :showAction="false" v-model="keyword"
						@search="search"></u-search>

				</view>
			</view>
		</u-navbar>
		<view style="padding: 0 20rpx;background-color: #fff;">
			<!-- <screen v-if="current === 1" class="screen" :titleArr="titleArr" :dropArr="dropArr"
				@finishDropClick="finishDropClick"></screen> -->
			<view v-if="current == 1" class="dis_f_l_c" style="padding: 20rpx 0;">
				<view :class="qg_tabList[0].id != null ?'tab1':'tab2'" class="tab-item dis_f_c_c" @click="tabchange(0)">
					<view style="margin-right: 5rpx;">{{qg_tabList[0].name}}</view>
					<view>
						<u-icon name="arrow-down" size="18rpx" v-if="!qg_tabList[0].select"></u-icon>
						<u-icon name="arrow-up" size="18rpx" v-else color="#016fdd"></u-icon>
					</view>
				</view>
				<view :class="qg_tabList[1].select?'tab1':'tab2'" class="tab-item dis_f_c_c" @click="tabchange(1)">
					<view style="margin-right: 5rpx;">{{qg_tabList[1].name}}</view>
					<view>
						<u-icon name="arrow-down" size="18rpx" v-if="!qg_tabList[1].select "></u-icon>
						<u-icon name="arrow-up" size="18rpx" v-else color="#016fdd"></u-icon>
					</view>
				</view>
				<view @click="tabchange(2)" :class="qg_tabList[2].code != null?'tab1':'tab2'"
					class="tab-item dis_f_c_c">
					<view style="margin-right: 5rpx;">{{qg_tabList[2].name}}</view>
					<view>
						<u-icon name="arrow-down" size="18rpx" v-if="qg_tabList[2].code == null"></u-icon>
						<u-icon name="arrow-up" size="18rpx" v-else color="#016fdd"></u-icon>
					</view>
				</view>
			</view>
			<Collapse @finishDropClicks="changesaixuan" v-else />
		</view>
		<!-- <div class="header">
			<div class="classic">
				<div @click="choose(i)" v-for="(item, i) in classicList" :key="i"
					:class="current === i ? 'active classic-item' : 'classic-item'">
					{{ item }}
					<img v-if="current === i" src="@/static/images/home/choose.jpg" />
				</div>
			</div>
			
			<u-search class="search" placeholder="请输入采购的商品名称" :showAction="false" v-model="keywords" v-else
				@search="searchs"></u-search>
			<screen v-if="current === 1" class="screen" :titleArr="titleArr" :dropArr="dropArr"
				@finishDropClick="finishDropClick"></screen>

			<Collapse @finishDropClicks="changesaixuan" v-else />
		</div> -->

		<div class="list">
			<SupplyList v-if="current === 0" :goodslist="goodslist" />
			<BuyList :qiugoulist="qiugoulist" v-else />
		</div>
		<u-popup :show="cateShow" @close="cateclose" mode="bottom">
			<view class="box" style="padding: 20rpx ;">
				<view class="dis_f_sb_c" style="font-size: 28rpx;">
					<view @click="cateclose">取消</view>
					<view style="color: #70B150;" @click="cateConfirm">确定</view>
				</view>
				<picker-view v-if="cateList.length !== 0" class="picker-view" :value="cateCurrent" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in cateList" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cateList[cateCurrent[0]].children" :key="index">
							{{item.name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item"
							v-for="(item,index) in cateList[cateCurrent[0]].children[cateCurrent[1]].children"
							:key="index">
							{{item.name}}
						</view>
					</picker-view-column>
				</picker-view>

			</view>
		</u-popup>
		<pickerAddress v-model="addressShow" @confirm="addresspick" />
		<tabar :active="2" class="tabar" />
	</div>
</template>
<script>
	const lineBg = '1'
	import Collapse from "@/components/Collapse/index";
	import screen from "@/components/Collapse/screen.vue";
	import SupplyList from "@/pages/buy/components/SupplyList.vue";
	import BuyList from "@/pages/buy/components/BuyList.vue";
	import tabar from "@/components/tabar.vue";
	import form from '../../uni_modules/uview-ui/libs/config/props/form';
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		name: "index",
		components: {
			BuyList,
			screen,
			Collapse,
			SupplyList,
			tabar,
			pickerAddress
		},
		data() {
			return {
				addressShow: false,
				cateList: [],
				cateShow: false,
				qg_tabList: [{
					name: '类目',
					id: null,
					select: false
				}, {
					name: '数量',
					type: null,
					select: false
				}, {
					name: '收货地',
					code: null,
					select: false,

				}],
				classicList: [{
					name: "供货大厅"
				}, {
					name: "求购大厅"
				}],
				keyword: "",
				current: 0,
				titleArr: ["类目", "数量", "收获地"],
				dropArr: [
					[{
						text: "类目",
						value: "",
					}, ],
					[{
							text: "不限",
							value: "",
						},
						{
							text: "最新",
							value: "10000",
						},
						{
							text: "最热",
							value: "11000",
						},
					],

					[{
							text: "不限",
							value: "",
						},
						{
							text: "价格升序",
							value: "0-40",
						},
						{
							text: "价格降序",
							value: "40-60",
						},
					],
				],
				total: 0,
				goodslist: [],
				cateCurrent: [0, 0, 0],
				page: 1,
				zonghe: 0,
				xiaoliang: 0,
				price: 0,
				tuijian: 1,
				cid: 0,
				new: 0,
				qiugoulist: [],
				keyword: "",
				lineBg: ""
			};
		},
		onLoad() {
			this.getlist();
			this.getqiugou();
			this.get_cateList()
		},
		onShow() {
			if (uni.getStorageSync("getjump") > 0) {
				if (uni.getStorageSync("getjump") == 2) {
					this.current = 1;
				} else {
					this.current = 0;
				}
			} else {
				this.current = 0;
			}
		},
		onHide() {
			console.log("离开");
			uni.setStorageSync("getjump", 0);
		},
		methods: {
			addresspick(obj) {
				console.log(obj)
				this.qg_tabList[2].name = obj.district
				this.qg_tabList[2].code = obj.area

				// this.formData1.provice = obj.provice
				// this.formData1.city = obj.city
				// this.formData1.area = obj.area
				// this.formData1.address = obj.address
			},
			cateclose() {
				this.cateShow = false
				this.qg_tabList[0].id = null
				this.qg_tabList[0].name = '类目'
				this.qg_tabList[0].select = false
				console.log(1)
			},
			bindChange(e) {
				this.cateCurrent = e.detail.value;
			},
			cateConfirm() {

				this.qg_tabList[0].select = true
				this.qg_tabList[0].name = this.cateList[this.cateCurrent[0]].children[this
					.cateCurrent[1]].children[this.cateCurrent[2]].name
				this.qg_tabList[0].id = this.cateList[this.cateCurrent[0]].children[this.cateCurrent[1]].children[this
					.cateCurrent[2]].id

				this.cateShow = false
			},
			get_cateList() {
				this.$.ajax(1, "POST", "index/getcate", {
					status: 1,
					type: 3
				}, (res) => {
					if (res.code == 1) {
						this.cateList = res.data.list
						console.log(this.cateList, 111)
					}
				})
			},
			tabchange(index) {
				this.qg_tabList[index].select = !this.qg_tabList[index].select
				if (index == 0) {
					this.cateShow = true
				}
				if (index == 1) {

				}
				if (index == 2) {
					this.qg_tabList[2].code = null
					this.qg_tabList[2].name = '收货地'
					this.addressShow = true
				}
			},
			search() {
				this.page = 1;
				if (this.current == 0) {
					this.getlist();
				} else {
					this.getqiugou();
				}
			},
			searchs() {
				this.page = 1;

			},
			getqiugou() {
				//
				var that = this;
				this.$.ajax(
					1,
					"POST",
					"index/getpurchaselist", {
						page: this.page,
						zonghe: this.zonghe,
						new: this.new,
						price: this.price,
						tuijian: this.tuijian,
						cid: this.cid,
						xiaoliang: this.xiaoliang,
						type: 1,
						keyword: this.keyword,
					},
					(res) => {
						if (res.code == 1) {
							console.log(res.data.list);
							if (that.page == 1) {
								that.qiugoulist = [];
							}
							that.qiugoulist = [...res.data.list, ...that.qiugoulist];
						}
					}
				);
			},
			choose(i) {
				this.keyword = "";
				// this.keywords = "";
				this.current = i.index;
				this.page = 1;
				if (this.current == 0) {
					this.getlist();
				} else {
					this.getqiugou();
				}
			},
			changesaixuan(e) {
				this.zonghe = e[0] ? e[0] : 0;
				this.new = e[1] ? e[1] : 0;
				this.price = e[2] ? e[2] : 0;
				this.xiaoliang = e[3] ? e[3] : 0;
				this.page = 1;
				this.getlist();
			},
			getlist() {
				var that = this;
				this.$.ajax(
					1,
					"POST",
					"index/getgoodslist", {
						page: this.page,
						zonghe: this.zonghe,
						new: this.new,
						price: this.price,
						cid: this.cid,
						xiaoliang: this.xiaoliang,
						type: 1,
						keyword: this.keyword,
					},
					(res) => {
						if (res.code == 1) {
							console.log(res.data.list);
							if (that.page == 1) {
								that.goodslist = [];
							}
							that.goodslist = [...res.data.list, ...that.goodslist];
						}
					}
				);
			},
			finishClick(resultData) {
				this.filterResultData = resultData;
				// uni.showModal({
				//     title: '温馨提示',
				//     content: '筛选数据 = ' + JSON.stringify(resultData)
				// })
			},
		},
		created() {},
		mounted() {},
	};
</script>
<style lang="scss" scoped>
	.picker-view {
		width: 100%;
		height: 500rpx;

	}

	.item {
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.tab2 {
		background-color: #F2F2F2;
	}

	.tab1 {
		color: #016fdd;
		background-color: #EBF5FF;
		font-weight: bold;
	}

	.tab-item {
		padding: 10rpx 28rpx;
		border-radius: 24rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.content {

		//padding:0 20px ;
		.header {
			background-color: #fff;
			padding: 130rpx 40rpx 0rpx;

			.classic {
				display: flex;
				align-items: start;
				gap: 20rpx;
				margin-bottom: 40rpx;

				.classic-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #999999;
					font-weight: 500;
					font-size: 28rpx;

					img {
						width: 30px;
						height: 20rpx;
						margin-top: -6rpx;
					}
				}

				.active {
					color: #131313;
					font-size: 32rpx;
				}
			}

			.search {
				padding: 30rpx 0 20rpx;
				//   margin-bottom: 24rpx;
			}
		}
	}

	.tabar {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
	}
</style>